<template>
  <div class="page-container">
    <!-- 头部导航 -->
    <header>
    <div class="logo">同品大</div>
    <nav>
      <ul class="menu">
        <li v-for="(item, index) in menuItems" :key="index" 
            @mouseenter="showSubmenu(index)" 
            @mouseleave="hideSubmenu(index)">
          <a href="#">{{ item.name }}</a>
          <transition name="fade">
            <ul v-if="item.showSubmenu" class="submenu">
              <li v-for="subItem in item.subItems" :key="subItem">
                <a href="#">{{ subItem }}</a>
              </li>
            </ul>
          </transition>
        </li>
      </ul> 
    </nav>
  </header>
    <!-- 主要内容区域 --> 
    <main>
      <!-- 轮播图区域 -->
      <section class="hero">
        <div class="hero-content">
          <h1>高端永磁材料专业供应商</h1>
          <p>专业的生产车间及设备·行业内专业高技术人</p>
          <button class="cta-button">科学的工艺制作流程 完善的售后服务</button>
        </div>
        <div class="product-images">
          <div class="product-image" v-for="i in 4" :key="i"></div>
        </div>
      </section>

      <!-- 应用领域 -->
      <section class="application-areas">
        <h2>应用领域</h2>
        <div class="areas-grid">
          <div class="area-item" v-for="area in applicationAreas" :key="area">
            {{ area }}
          </div>
        </div>
      </section>

      <!-- 公司数据 -->
      <section class="company-stats">
        <div class="stat-item" v-for="(stat, index) in companyStats" :key="index">
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-label">{{ stat.label }}</div>
        </div>
      </section>

      <!-- 新闻中心 -->
      <section class="news-center">
        <h2>NEWS CENTER</h2>
        <div class="news-grid">
          <div class="news-card" v-for="i in 3" :key="i">
            <div class="news-image"></div>
            <div class="news-content">
              <h3>新闻标题</h3>
              <p>新闻内容摘要...</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 生产车间 -->
      <section class="production-workshop">
        <h2>生产车间</h2>
        <div class="workshop-images">
          <div class="workshop-image" v-for="i in 4" :key="i"></div>
        </div>
      </section>
    </main>

    <!-- 页脚 -->
    <footer>
      <div class="footer-content">
        <!-- 页脚内容 -->
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      menuItems: ['关于同品', '新闻资讯', '产品中心', '技术创新', '人才招聘', '联系我们'],
      applicationAreas: ['汽车', '工业', '清洁能源', '节能家电消费电子', '医疗卫生'],
      companyStats: [
        { value: '1990年', label: '公司成立' },
        { value: '16677.72吨', label: '年销售量' },
        { value: '1900人', label: '员工' },
        { value: '402项', label: '专利' }
      ]
    }
  }
}
</script>
<style scoped>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.menu {
  display: flex;
  list-style-type: none;
}

.menu > li {
  position: relative;
  margin-left: 20px;
}

.menu > li > a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 10px;
  min-width: 150px;
  list-style-type: none;
}

.submenu li {
  margin: 5px 0;
}

.submenu a {
  text-decoration: none;
  color: #666;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>
<style scoped>
.page-container {
  font-family: Arial, sans-serif;
}

header {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background-color: #fff;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

nav a {
  margin-left: 20px;
  text-decoration: none;
  color: #333;
}

.hero {
  display: flex;
  justify-content: space-between;
  background-color: #f0f0f0;
  padding: 50px;
}

.hero-content {
  width: 50%;
}

.product-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.product-image {
  height: 100px;
  background-color: #ddd;
}

.application-areas {
  padding: 50px;
}

.areas-grid {
  display: flex;
  justify-content: space-between;
}

.area-item {
  text-align: center;
}

.company-stats {
  display: flex;
  justify-content: space-around;
  background-color: #003366;
  color: white;
  padding: 50px;
}

.news-center {
  padding: 50px;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.news-image {
  height: 200px;
  background-color: #ddd;
}

.production-workshop {
  padding: 50px;
  background-color: #f0f0f0;
}

.workshop-images {
  display: flex;
  justify-content: space-between;
}

.workshop-image {
  width: 23%;
  height: 150px;
  background-color: #ddd;
}

footer {
  background-color: #003366;
  color: white;
  padding: 20px;
}

.cta-button {
  background-color: #0066cc;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}
</style>